<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-button type="primary" size="small" @click="handleAdd()">新增仓库</el-button>
        </div>

      </el-col>

      <el-col :span="18">
        <div class="grid-content bg-purple">

          <el-input
            placeholder="默认展示部分用户，可以通过用户名搜索更多用户..."
            prefix-icon="el-icon-search"
            size="small"
            style="width: 400px;margin-right: 10px"
            v-model="keywords">
          </el-input>
          <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
        </div>
        <!--  <div style="margin-bottom: 10px;display: flex;justify-content: center;align-items: center">-->

        <!--          </div>-->
      </el-col>

    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="序列"
        type="index"
        :index="indexMethod">
      </el-table-column>

      <el-table-column
        label="编号"
        width="180"
        prop="serialNumber"
        sortable
      >
      </el-table-column>

      <el-table-column
        label="仓库名称"
        width="180"
        prop="name"
        sortable
      >
      </el-table-column>


      <el-table-column
        label="联系人"
        width="180"
        prop="contacts"
        sortable
      >
      </el-table-column>

      <el-table-column
        label="联系电话"
        width="180"
        prop="phone"
        sortable
      >
      </el-table-column>

      <el-table-column
        label="备注"
        width="180"
        prop="remark"
        sortable
      >
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="page.size"
      layout="prev, pager, next"
      :total="page.total"
      :page-count="page.pages"
    >
    </el-pagination>


    <!--    修改弹出框-->
    <el-dialog
      title="提示"
      :visible.sync="updateDialogVisible"
      width="30%"
      center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="仓库编号">
          <el-input v-model="form.serialNumber"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
        <!--
             <el-form-item label="是否默认">
                  <el-switch v-model="form.isDefault"
                             active-value="1"
                             inactive-value="0"
                  ></el-switch>
                </el-form-item>-->

        <el-form-item label="联系人">
          <el-input v-model="form.contacts"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmitUpdate">立即创建</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    增加弹出框-->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="30%"
      center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="仓库编号">
          <el-input v-model="form.serialNumber"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
        <!--
             <el-form-item label="是否默认">
                  <el-switch v-model="form.isDefault"
                             active-value="1"
                             inactive-value="0"
                  ></el-switch>
                </el-form-item>-->

        <el-form-item label="联系人">
          <el-input v-model="form.contacts"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd">增加仓库</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //修改弹出框
        updateDialogVisible: false,
        //增加弹出框
        addDialogVisible: false,
        tableData: [],
        // 多选
        multipleSelection: [],
        //表单
        form: {
          id: "",
          serialNumber: "",
          name: '',
          contacts: '',
          phone: '',
          remark: '',
          isDefault: 1,
          current: 1,
          size: 5,
        },
        page: {
          current: 1,
          size: 5,
          total: 100,
          pages: 0,
        },
        // 模糊搜搜
        keywords: ''
      }
    },
    mounted: function () {
      this.handleSelect()

    },
    methods: {
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {

        this.axios({
            method: 'post',
            url: 'http://localhost:8080/storage/getList',
            data: {current: val,size: 5}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.page.size=res.data.size;
            this.page.current=res.data.current;
            this.page.total=res.data.total;
            this.page.pages=res.data.pages;

            this.tableData = res.data.records;
          }
        });
      },
      handleSelect() {
        this.axios({
            method: 'post',
            url: 'http://localhost:8080/storage/getList',
            data: {current: this.page.current,size:this.page.size}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.page.size=res.data.size;
            this.page.current=res.data.current;
            this.page.total=res.data.total;
            this.page.pages=res.data.pages;

            this.tableData = res.data.records;
          }
        });
      },

      //显示增加
      handleAdd() {
        this.addDialogVisible = true;
      },
      //提交增加
      onSubmitAdd() {
        this.axios({
          method: 'post',
          url: 'http://localhost:8080/storage/insert',
          data: this.form
        }).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message:res.message,type:'success'});
            this.addDialogVisible = false;
          }
        });
      },

      //编辑
      handleEdit(index, row) {
        this.form = row;
        this.updateDialogVisible = true;
      },

      onSubmitUpdate() {

        this.axios({
          method: 'post',
          url: 'http://localhost:8080/storage/updateById',
          data: this.form
          // 'http://localhost:8080/storage/updateById',{data:this.form}
        }).then((response) => {
          var res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message:res.message,type:'success'});
          }
        });
        this.updateDialogVisible = false;
      },

      //取消按钮
      onCancel() {
        this.handleSelect();
        this.addDialogVisible = false;
        this.updateDialogVisible = false;

      },

      // 删除
      handleDelete(index, row) {

        this.axios.post('http://localhost:8080/storage/deleteById?id=' + row.id).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect(this.form);
            this.$message({message:res.message,type:'success'});
          }
        });
      }
    },
  }
</script>

<style>

  el-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
